<script setup>
  import { ref,onMounted } from 'vue'
  import { queryAllDepts,addDepts,queryDeptById,updateDept,deleteDeptsById } from '@/api/dept'
  import { ElMessage,ElMessageBox } from 'element-plus'


  /**
   * 表格数据
   */
  const tableData = ref([])

  /**
   * 加载数据
   *  1.async 表示这个函数是一个 异步函数
   *  2.await 关键字 —— 等待异步操作完成：等待 queryAllDept() 接口请求完成，并将返回结果赋值给 result。
   */
  const search =async () =>{
    const result =await queryAllDepts()
    if(result.code){
      tableData.value = result.data
    }
  }

  /**
   * 钩子函数
   */
  onMounted(()=>{
    search()
  })

  /**
   * Dialog对话框变量
   */
  const deptFormVisible = ref(false);
  const formLabelWidth = '100px';
  const dept = ref({name: ''});
  const deptTitle = ref('');

  /**
   * 弹出新增部门Dialog对话框
   */
  const addDept = ()=>{
    deptFormVisible.value = true;  // 打开dialog对话框
    deptTitle.value = "新增部门";  // 动态绑定title
    dept.value = {name: ''}   // 当再次打开新增部门时清空表单数据
   /**
    * 当再次输入时若之前的表单示例存在，则清空值
    */
    if (deptFormRef.value){
      deptFormRef.value.resetFields()  
    }
  }

  /**
   * 表单校验规则变量
   */
  const deptFormRef = ref();
  const rules = ref({
    //blur指鼠标移出输入框后会触发校验
    name: [
      { required: true, message: '请输入部门名称', trigger: 'blur' },
      { min: 2, max: 10, message: '长度应在2到10位', trigger: 'blur' },
    ]
  })

  /**
   * 新增部门
   */
  const save =async ()=>{
    /**
     * 校验表单:若验证不通过就会新增失败，反之则成功
     * 1.if (!deptFormRef.value) return; -- 判断表单是否成功获取到 Element Plus 的表单实例,
        每打开一个表单就相当于创建了一个新的表单实例。
        如果 deptFormRef.value 为 null 或 undefined（即没有正确绑定到表单实例），说明表单不可用。
     * 2.valid 是 Element Plus 表单校验方法自动传入的一个参数，表示表单是否通过了校验。
        如果表单验证通过，valid 为 true ; 如果表单验证失败，valid 为 false
     */
    if (!deptFormRef.value) return;  
    await deptFormRef.value.validate(async (valid) => {
      if (valid) {//验证通过
        /**
         * 根据是否有id判断是新增还是编辑
         * 1.新增部门addDepts执行dept.value = {name: ''}
         * 2.编辑部门queryDeptById执行dept.value = result.data
         */
        let result;
        if(dept.value.id){//有id 表示是编辑
          result =await updateDept(dept.value)
        }
        else{// 没有id 表示是新增
          result = await addDepts(dept.value)
        }
        
        //  保存成功
        if(result.code){
          //提示成功信息
          ElMessage.success("操作成功")
          // 关闭对话框
          deptFormVisible.value = false;
          // 刷新表格数据
          search()
        }
        // 保存失败
        else{
          //提示失败信息
          ElMessage.error(result.msg)
        }
      } else {//验证失败
        ElMessage.error("表单验证不通过")
      }
    })
  }

  /**
   * 点击编辑按钮就会把部门名称回显回来
   */
  const edit =async (id)=>{
    const result =await queryDeptById(id);
    if(result.code){
      deptTitle.value = "修改部门";
      deptFormVisible.value = true;
      dept.value = result.data; 
    }
    if (deptFormRef.value){
      deptFormRef.value.resetFields()  
    }
  }

  /**
   * 删除部门
   */
  const deleteDept = (id) => {
    ElMessageBox.confirm(
        '确定要删除该部门吗?', //这是正文
        '提示',               //这是标题
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => { // 确认按钮
      const result =await deleteDeptsById(id);
      if(result.code){
        ElMessage.success("操作成功");
        search();
      }
      else{
        ElMessage.error(result.msg); 
      }
    })
    .catch(() => { // 取消按钮
      ElMessage.info('已取消删除')
    })
  }

</script>

<template>
  <h1>部门管理</h1>
  <div class="container">
    <!-- 新增部门按钮 -->
    <el-button type="primary" @click="addDept"> + 新增部门</el-button>
  </div>

  <!-- 表格 -->
  <div class="Table">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="部门名称" width="400" align="center"/>
      <el-table-column prop="updateTime" label="最后操作时间" width="400" align="center"/>

      <el-table-column label="操作" width="400" align="center">
        <template #default="scope">
          <!-- edit(scope.row.id) 获取的 id 是与数据库中的一致的
            因为:通过接口 queryAllDepts() 获取表格数据结构是:{
            "code": 200,
            "data": [
              { "id": 1, "name": "研发部", "updateTime": "2025-04-05" },
              { "id": 2, "name": "人事部", "updateTime": "2025-04-04" }
            ]
          } -->
          <el-button size="small" type="primary" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>
          <el-button size="small" type="danger" @click="deleteDept(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  
  <!--新增/编辑部门 Dialog对话框 -->
  <div class="Dialog">
    <el-dialog v-model="deptFormVisible" :title="deptTitle" width="500"><!-- 动态绑定title -->
      <el-form :model="dept" :rules="rules" ref="deptFormRef">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="dept.name" autocomplete="off" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="deptFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>



<style scoped>
  .label-text {
    text-align: left;
    display: block; /* 确保 span 表现为块级元素以便对齐生效 */
  }
  
  .container {
    margin: 15px 0px;
  }
</style>
